<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>展示用户拥有的相册</title>

    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}">
    <script type="text/javascript" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.js}"></script>

</head>
<body>
    <p th:text="${jsonResult.result.userId}">用户编号</p>
    <div>
        <button id="newAlbum" data-toggle="modal" data-target="#myModal">点击新建相册(弹出模态框，输入相册名称)</button>
    </div>


    <div th:each="photoAlbum : ${jsonResult.result.photoAlbums}" style="background-color: greenyellow">
        <span th:text="${photoAlbum.albumName}">相册名称</span> <br/>
        <span th:text="${photoAlbum.id}">相册编号</span> <br/>
        <span th:text="${photoAlbum.albumDefaultPicture}"> 默认图片</span><br/>
        <img th:src="${photoAlbum.albumDefaultPicture}" style="width: 5%;height: 5%" >
        <button th:onclick="newPhoto([[${photoAlbum.id}]]);">点击查看相册图片</button>

        <a th:href="@{/deletePhotoAlbum(photoAlbumId=${photoAlbum.id})}">删除相册</a>
        <hr/>
        <br/>
        <br/>
    </div>



    <!--新建相册 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        新建相册
                    </h4>
                </div>
                <div class="modal-body">

                    <input type="text" name="albumName" id="albumName"/>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" id="saveNewAlbum">
                        确定
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</body>
        <!--新建相册-->
        <script type="text/javascript">
            $(function(){
               $("#saveNewAlbum").click(function(){            //保存新建相册
                  var albumNameVal =  $("#albumName").val();
                  $("#myModal").modal("hide");
                    $.ajax({
                       url:"createPhotoAlbum/"+albumNameVal,         // PhotoAlbumController 控制层
                       method:"POST",
                       dataType:"json",
                       success:function(dt){
                            console.log(dt);
                            //新建成功，弹出弹窗
                       }
                    });
               });
            });

        </script>


        <!--为相册增加相片-->
        <script type="text/javascript">
            function newPhoto(obj){
                console.log(obj);
                //跳转至控制层，查看相册详情
                window.location.href="lookPhotoAlbum/"+obj;
            }
        </script>
</html>